<template>
  <!-- 项目管理：excel文档内容 -->
  <div style="width:100%;background:#FFF;padding-top:10px;">
    <div v-if="contentList.length">
      <el-table :data="contentList" style="width:96%;margin:6px auto;">
        <el-table-column label="排序" align="center" min-width="50">
          <template slot-scope="scope">{{ scope.row.sortNum }}</template>
        </el-table-column>
        <el-table-column v-for="(vo, index) in heading" :key="index" :label="vo.name" align="center" :min-width="vo.width">
          <template slot-scope="scope">
            <span v-if="scope.row.content[vo.param]">{{ scope.row.content[vo.param] }}</span>
            <span v-else></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="noData" v-else>暂无信息</div>
  </div>
</template>

<script>
  import { Loading } from 'element-ui';
  import { mapGetters } from 'vuex';
  import { listContentInfo } from "@/api/project/contentInfo";

  export default {
    name: 'ProjectExcelPreview',
    data(){
      return {
        projectId:"",
        heading:JSON.parse(this.$route.query.heading),
        contentList:[]
      }
    },
    created(){
      this.projectId = this.$route.query.projectId;
      console.log("projectId", this.projectId)
      this.getContentInfo();
    },
    activated(){
      this.projectId = this.$route.query.projectId;
    },
    computed: {
      ...mapGetters([
        'nickName', 'name'
      ])
    },
    watch:{
      projectId(){
        this.getContentInfo();
      }
    },
    methods:{
      // 获取文档内容
      getContentInfo(){
        let loadingInstance = Loading.service({ fullscreen: true, background:"rgba(0,0,0,0.5)" });
        listContentInfo({
          projectId:this.projectId
        }).then(ret=>{
          if(ret.code == 200){
            this.contentList = [];
            ret.rows.map((vo, i)=>{
              vo.index = i+1;
              vo.content = JSON.parse(vo.content);
              this.contentList.push(vo);
            })
          }else{
            this.$message.error(ret.msg);
          }
          loadingInstance.close();
        })
        .catch(err=>{
          console.log(err);
          loadingInstance.close();
        })
      },
    }
  }
</script>

<style scoped>
  #noData{
    width:100px;
    height:24px;
    line-height:24px;
    text-align:center;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
  }
</style>